import React, { Suspense } from 'react';
import { renderRoutes, RouteConfigComponentProps } from 'react-router-config';

import { Layout } from 'antd';

import './style.less';
import 'antd/dist/antd.css';
import imgURl from "./images/title.jpg";
import AntdRouterMenu, {
  MenuItem,
} from '../../components/Antd-router-menu';
import PageLoading from '../../components/page-loading';

const { Content, Footer, Header } = Layout;
/**
 * 配置导航栏链接和文字
 */
const MENU_DATA = [
  new MenuItem('/home', '首页', '', 'first'),
  new MenuItem('/news.', '实验室新闻'),
  new MenuItem('/direction.', '研究方向'),
  new MenuItem('/results.', '研究成果'),
  new MenuItem('/projects.', '科研项目'),
  new MenuItem('/members.', '成员介绍'),
  new MenuItem('/photos.', '实验室相册'),
  new MenuItem('/recruit.', '合作与招募'),
  new MenuItem('/contact.', '联系我们', '', 'last'),
];

export default ({ route }: RouteConfigComponentProps) => {
  return (
    <div className='admin'>
      <Layout className='layout'>
        <Header className='header'>    
          <div className='title'>
            <img src={imgURl} alt="" className='img'></img>
          </div>
          <div className="navi">
            <AntdRouterMenu menuData={MENU_DATA} />
          </div>
          </Header>
        <div>
          <Suspense fallback={<PageLoading />}>
            <Content className='content'>
              {renderRoutes(route?.routes)}
            </Content>
          </Suspense>
          <Footer className='footer'>code@Eric design@Luna</Footer>
        </div>
      </Layout>
    </div>
  );
};
